<template>
  <div class="templateDetailWrap">
    <div class="detailHeader">
      <span style="text-indent: 5px;letter-spacing:3px;">{{templateName}}</span>
      <div class="iconWrap">
        <router-link to="/templateSet"><i class="iconfont icon-fanhui"></i></router-link>
      </div>
    </div>
    <div class="tableContainer">
      <div class="tableInner" ref="tableInner">
        <el-table
          ref="multipleTable"
          :data="rows"
          stripe
          :height="tableHeight"
          @selection-change="changeFun"
          :span-method="objectSpanMethod"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column
            label="指标类别"
            prop="classifyName"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="类别分值"
            prop="classifyScore"
            show-overflow-tooltip
          >

          </el-table-column>
          <el-table-column
            prop="itemsName"
            label="指标项"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="standardScore"
            label="指标分值"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="指标描述"
            prop="itemsDesc"
            show-overflow-tooltip>

          </el-table-column>
          <el-table-column
            label="评分标准"
            prop="scoreRule"
            show-overflow-tooltip
            >
            <template slot-scope="scope">
              <div style="float: left;">
                {{scope.row.scoreRule}}
              </div>

            </template>
          </el-table-column>
          <el-table-column
            label="责任部门"
            prop="g"
          >
            <template slot-scope="scope">
              <el-row>
                <el-col v-show="scope.row.hasRoadTransport"  :span="12">
                  <span >市交通局</span>
                </el-col>
                <el-col v-show="scope.row.hasCityManage"  :span="12">
                  <span >市城管局</span>
                </el-col>
                <el-col v-show="scope.row.hasTraffic" :span="12">
                  <span  >市交警局</span>
                </el-col>
                <el-col v-show="scope.row.hasAreaGov" :span="12">
                  <span >各区政府</span>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column
            label="附件管理"
            prop="hasAttachment"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.hasAttachment ? "有附件" : "无附件"}}
              </template>
          </el-table-column>
        </el-table>
        <div style="line-height: 40px;border-bottom: 1px solid #ebeef5"><span style="display:inline-block;width: 50%;text-align: center;color: grey;border-right:  1px solid #ebeef5;">总分：{{totalScore}} 分</span><span style="display: inline-block;width: 49%;text-align: center;color: grey;">指标项：{{rows.length}} 项</span></div>
      </div>
    </div>

  </div>
</template>

<script>

  export default {
    name: 'editor',
    data() {
      return {
        rows: [],
        templateId:this.$route.params.id,
        spanArr: [],
        multipleSelection: [],
        templateInfoList: [],
        tableHeight: 400,
        templateName: "",
        totalScore:0,
        noScore:false
      }
    },
    components: {},
    created(){
     this.getExamineInfo()
    },
    mounted(){
      this.$nextTick(() => {
        //表格滚动
        this.tableHeight = document.querySelector(".templateDetailWrap").clientHeight - 120
      })
    },
    methods: {
      //      数组去重
      arrayUnique(arr, name) {
        var hash = {};
        return arr.reduce(function (item, next) {
          hash[next[name]] ? '' : hash[next[name]] = true && item.push(next);
          return item;
        }, []);
      },

      //全选
      changeFun(val) {

        this.multipleSelection = val
        this.totalScore=0
        this.templateInfoList=[]
        //组装数组
        let newArr=this.arrayUnique(this.multipleSelection,"classifyId")
        newArr.forEach(item=>{
          this.templateInfoList.push({
            classifyId:item.classifyId,
            classifyName:item.classifyName,
            itemList:[]
          })
        })
        this.noScore=false
        this.multipleSelection.forEach(item=>{
          this.totalScore+=this.toDecimal(item.standardScore)
          if(!item.standardScore){
            this.noScore=true
          }
          this.templateInfoList.forEach(item1=>{
            if(item1.classifyId==item.classifyId){
              item1.itemList.push(item)
            }
          })
        })
      },
      //获取所有信息
      getExamineInfo(){
        this.axios.post(process.env.API_HOST + `/examine/selectTemplate`,{templateId:this.templateId})
          .then(response => {
            let result = response.data
            if(result.code==200){
              this.templateName=result.result.templateName
              this.rows=[]
              result.result.templateInfoList.forEach(item=>{
                item.itemList.forEach(item1=>{
                  this.rows.push({...item1,classifyId:item.classifyId,classifyName:item.classifyName,classifyScore:""})
                })
              })
              this.spanArr=this.getSpanArr(this.rows,"classifyName")
              this.rows.forEach((item,key)=>{
                this.totalScore+=this.toDecimal(item.standardScore)
                this.getclassifyScore(key)
              })

            }
          })

      },

      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0||columnIndex === 1) {
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
      },
      getclassifyScore(index){
        let sub=0,isPass=true,classifyScore=0
        this.spanArr.forEach(item=>{
          sub+=item
          if(isPass&&sub>index){
            isPass=false
            const sliceArr = this.rows.slice(sub-item,sub)
            sliceArr.forEach(item=>{
              classifyScore+=this.toDecimal(item.standardScore)
            })
            sliceArr.forEach(item=>{
              item.classifyScore=classifyScore
            })
          }
        })

      },
    },
    computed: {

    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .templateDetailWrap
    page1()
    background-color white
    .detailHeader
      background-color: #ECF5FF;
      text-align: center;
      color: #3975FE;
      line-height: 40px;
      font-size: 20px;
      font-weight: bold;
      span
        font-weight bold
      .iconWrap
        float: right;
        margin-right: 15px;
        color: white;
        .iconfont
          color: #3975FE;
          &:hover
            opacity 0.8
    .tableContainer
      padding 20px 20px 100px 20px
      background-color white
      border-radius 5px
      margin 0 auto
      .tableInner //表格滚动
        width 100%
        overflow-y auto

</style>
